<template>
  <a-layout>
    <a-layout-header style="padding: 0;height: 3rem;line-height: normal;">
      <a-row class="header">
        <a-col class="iconContainer" :span="4">
          <icon></icon>
        </a-col>
        <a-col class="searchContainer" :span="12">
          <search @searchEvent="searchEvent"></search>
        </a-col>
        <a-col class="userInfoContainer" :span="8">
          <user-info ref="userInfo" @showLoginPage="showLoginPage"/>
        </a-col>
      </a-row>
    </a-layout-header>
    <a-layout style="height: 24rem;">
      <a-layout-sider class="slider" theme="light">
        <slider></slider>
      </a-layout-sider>
      <a-layout-content class="contentWrapper" theme="light">
        <div class="content">
          <Content ref="content"></Content>
        </div>
        <div class="currentPlayList" v-if="showPlayListState">
          <current-play-list></current-play-list>
        </div>
      </a-layout-content>
    </a-layout>
    <a-layout-footer class="footer" theme="light">
      <Footer></Footer>
    </a-layout-footer>
    <a-modal
        :visible="visible"
        @cancel="handleCancelLoginPage"
        footer=""
        width="20rem">
      <login @loginStatus="loginStatus"></login>
    </a-modal>
  </a-layout>
</template>
<script>
import Icon from "@/components/web/icon/Icon";
import Search from "@/components/web/search/Search";
import UserInfo from "@/components/web/user/User";
import Login from "@/components/web/login/Login";
import slider from "@/components/web/content/slider/slider";
import Footer from "@/components/web/footer/Footer";
import Content from "@/components/web/content/content/Content";
import CurrentPlayList from "@/components/web/content/currentPlayList/CurrentPlayList";
import {CURRENT_PLAYING_MUSIC, MUSIC_PLAY_LIST} from "@/store/mutation-types";
import Vue from "vue";

export default {
  name: "Home",
  components: {
    Icon, Search, UserInfo, Login, slider, Footer, Content, CurrentPlayList
  },
  data() {
    return {
      profile: this.$store.getters.profile,
      test: this.$store.getters.test,
      visible: false,
      showPlayListState: false
    }
  },
  mounted() {
    this.$eventBus.$on('showPlayListState', () => {
      this.handlePlayListState()
    });
    // 将上次播放的音乐放入vuex中
    let currentMusic = Vue.ls.get(CURRENT_PLAYING_MUSIC);
    let musicPlayList = Vue.ls.get(MUSIC_PLAY_LIST);
    this.$store.commit('SET_CURRENTMUSIC',currentMusic);
    this.$store.commit('SET_PLAYLIST',musicPlayList);
    this.$eventBus.$emit('updateCover')
  },
  methods: {
    showLoginPage() {
      this.visible = true;
    },
    handleCancelLoginPage() {
      this.visible = false;
    },
    loginStatus() {
      this.visible = false;
      this.$refs.userInfo.showInfo();
    },
    searchEvent() {
      this.$refs.content.showSearchResult();
    },
    handlePlayListState() {// 隐藏或显示播放列表
      this.showPlayListState = !this.showPlayListState;
    }
  },
  destroyed() {
    this.$eventBus.$off('showPlayListState')
  }
}
</script>

<style lang="css" scoped>
.header {
  width: 100%;
  height: 3rem;
  padding: 0.5rem 0.2rem;
  margin: 0;
  background-color: red;
}

.iconContainer {
  height: 100%;
}

.searchContainer {
  height: 100%;
}

.userInfoContainer {
  height: 100%;
}

.slider {
  flex: 0 0 11rem !important;
  max-width: 11rem !important;
  min-width: 11rem !important;
  overflow: hidden;
  width: 11rem;
  border-right: 1px #e8e8e8 solid;
}

.slider:first-child {
  overflow: hidden;
}

.slider:first-child:hover {
  overflow-y: scroll !important;
}

/* 滚动条样式*/
.slider:first-child:hover::-webkit-scrollbar {
  width: 6px;
  height: 5px;
}

/*滚动条里面小方块*/
.slider:first-child::-webkit-scrollbar-thumb {
  background: #e8e8e8;
  border-radius: 5px;
}

/*滚动条里面轨道*/
.slider:first-child::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2);
  background: #ffffff !important;
}


.contentWrapper {
  height: 24rem !important;
  position: relative;
  overflow-y: hidden;
}

/* 播放列表*/
.currentPlayList {
  position: absolute;
  /*display: none;*/
  height: 24rem;
  width: 50%;
  right: 0;
  top: 0;
  background-color: white;
  border: 1px #eeeeee solid;
}


.footer {
  padding: 0 !important;
  height: 4rem !important;
  width: 100%;
}
</style>
